<template>
  <div class="add-second-wrap">
    <step />
    <el-row class="item-container">
      <div class="title-wrap1">
        <div class="title">支持退票：</div>
        <el-select v-model="info.able_return" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="title">徽章：</div>
      <el-input v-model="badge" type="text" placeholder="请输入徽章名称" class="input-container" @keyup.native.enter="handleAddBadge" />
      <el-button type="primary" style="margin-left: 10px" class="btn" @click="handleDeleteBadge">删除徽章</el-button>
    </el-row>
    <el-row class="item-container timer">
      <div v-for="(item, index) of info.badge" :key="index" class="timer-item">
        <el-checkbox v-model="item.check" :label="item.name" border />
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="title-wrap1">
        <div class="title">需要身份证：</div>
        <el-select v-model="info.need_card" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="title-wrap1">
        <div class="title">需要换票：</div>
        <el-select v-model="info.need_exchange_ticket" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </el-row>
    <el-row class="item-container">
      <div class="title">适合人群：</div>
      <el-input v-model="info.apply_crowd" placeholder="请输入适合人群" style="width: 300px" />
    </el-row>
    <el-row class="item-container">
      <div class="title">购票须知：</div>
      <div class="tinymce">
        <tinymce ref="editor" v-model="info.buy_notice" :height="300" />
      </div>
    </el-row>
    <!-- <el-row class="item-container">
      <div class="title">费用明细：</div>
      <el-input v-model="info.explain" type="textarea" placeholder="请输入费用明细" class="textarea-container" />
    </el-row> -->
    <!-- <el-row class="item-container">
      <div class="title">使用规则：</div>
      <div class="tinymce">
        <tinymce ref="editor" v-model="info.use_rule" :height="300" />
      </div>
    </el-row> -->
    <!-- <el-row class="item-container">
      <div class="title">预定说明：</div>
      <el-input v-model="info.refund_rule" type="textarea" placeholder="请输入预定说明" class="textarea-container" />
    </el-row> -->
    <el-row class="item-container right">
      <el-button type="primary" class="add-btn" @click="handleSubmit">完成</el-button>
    </el-row>
  </div>
</template>
<script>
import Step from '@/components/step'
import Tinymce from '@/components/Tinymce'
import { addHotel, editType } from '@/api/combo'
import { deepClone } from '@/utils/index.js'
export default {
  name: 'CateSecond',
  components: {
    Step,
    Tinymce
  },
  data() {
    return {
      info: {
        able_return: '支持',
        use_rule: '',
        need_card: '是',
        need_exchange_ticket: '是',
        // refund_rule: '',
        // explain: '',
        badge: [],
        apply_crowd: '',
        buy_notice: ''
      },
      options: [
        {
          label: '0',
          value: '不支持'
        },
        {
          label: '1',
          value: '支持'
        }
      ],
      options2: [
        {
          label: '0',
          value: '否'
        },
        {
          label: '1',
          value: '是'
        }
      ],
      options3: [
        {
          label: '0',
          value: '否'
        },
        {
          label: '1',
          value: '是'
        }
      ],
      badge: ''
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const info = JSON.parse(this.$route.query.info)
      if (!info) {
        this.$router.push('/merchandise/combo/cate')
      } else {
        if (!Array.isArray(info.package_pics)) {
          info.package_pics = [info.package_pics]
        }
        if (info.id) {
          console.log(info)
          info.able_return = Number(info.able_return) === 1 ? '支持' : '不支持'
          info.need_card = Number(info.need_card) === 1 ? '是' : '否'
          info.need_exchange_ticket = Number(info.need_exchange_ticket) === 1 ? '是' : '否'
          info.badge = this.initBadge(info.badge)
          this.info = info
        } else {
          this.info = Object.assign({}, this.info, { ...info })
        }
      }
    },
    // 初始化徽章
    initBadge(obj) {
      if (obj.length) {
        const result = []
        obj.split('|').map((item) => {
          result.push({ name: item, check: true })
        })
        return result
      } else {
        return []
      }
    },
    // 新增徽章
    handleAddBadge() {
      if (this.badge.trim() === '') {
        this.$message.warning({
          message: '徽章名称不能为空',
          duration: 1000
        })
        return
      }
      this.info.badge.push({ name: this.badge, check: true })
      this.badge = ''
    },
    // 删除徽章
    handleDeleteBadge() {
      const time = this.info.badge
      for (let index = time.length - 1; index >= 0; index--) {
        if (time[index].check) {
          time.splice(index, 1)
        }
      }
    },
    // 提交
    handleSubmit() {
      this.validity()
    },
    // 改变上传格式
    validity() {
      const info = deepClone(this.info)
      info.package_id = info.id || 0
      info.able_return = info.able_return === '支持' ? 1 : 0
      info.need_card = info.need_card === '是' ? 1 : 0
      info.need_exchange_ticket = info.need_exchange_ticket === '是' ? 1 : 0
      if (info.buy_notice.trim() === '') {
        this.$message.warning({
          message: '购买须知不能为空',
          duration: 1000
        })
        return
      }
      info.badge = this.validityBadge(info.badge)
      info.package_pics = this.validityPics(info.package_pics)
      info.id ? this.edit(info) : this.add(info)
    },
    // 改变徽章
    validityBadge(array) {
      if (!array.length) return ''
      const result = []
      array.map((item) => {
        result.push(item.name)
      })
      return result.join('|')
    },
    // 改变轮播图
    validityPics(array) {
      return array.join('|')
    },
    // 编辑
    async edit(info) {
      await editType({ ...info })
      this.$message.success({
        message: '编辑成功',
        duration: 1000
      })
      this.$router.push({
        path: '/merchandise/combo/scenic'
      })
    },
    // 添加
    async add(info) {
      await addHotel({ ...info })
      this.$message.success({
        message: '添加成功',
        duration: 1000
      })
      this.$router.push({
        path: '/merchandise/combo/scenic'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.add-second-wrap {
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2000;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  .item-container{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    .title{
      font-size: 14px;
      line-height: 30px;
      width: 100px;
    }
    .title-right{
      margin-left: 40px;
    }
    .management-btn{
      margin-left: 15px;
    }
    .input-container{
      width: 400px;
    }
    .textarea-container{
      width: 40%;
    }
    .window {
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
    .item-left,.item-right{
      display: flex;
      align-items: center;
      p {
        margin-left: 10px;
      }
    }
    .add-btn {
      width: 200px;
    }
  }
  .right{
    justify-content: flex-end;
  }
  .title-wrap{
    width: 100%;
    display: flex;
  }
  .title-wrap1{
    margin-right: 20px;
    display: flex;
  }
  .item-container-other {
    padding-left: 100px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
  }
  .drink{
    width: 100%;
    display: flex;
    margin-bottom: 10px;
  }
  .timer {
    margin-left: 100px;
    flex-wrap: wrap;
    .timer-item {
      margin-bottom: 10px;
      margin-right: 20px;
    }
  }
  .cursor {
    cursor: pointer;
  }
  .tab-content{
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  .tinymce{
    width: 80%;
  }
}
</style>
